<template>
  <div
    v-if="categories && categories.length > 0"
    class="w-full p-5 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-100 dark:border-gray-300"
  >
    <!-- 分类标题 -->
    <div class="flex items-center">
      <svg
        t="1761956987740"
        class="icon w-4 h-4 mr-2 mb-3 dark:text-white"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5586"
        width="200"
        height="200"
      >
        <path
          d="M184.637696 812.567543 109.098255 812.567543c-13.890358 0-25.178449 11.269671-25.178449 25.174356 0 13.908778 11.288091 25.183566 25.178449 25.183566l75.538417 0c13.891382 0 25.179472-11.275811 25.179472-25.183566C209.817168 823.836191 198.529077 812.567543 184.637696 812.567543zM914.82909 812.567543 360.890932 812.567543c-13.895475 0-25.183566 11.269671-25.183566 25.174356 0 13.908778 11.289114 25.183566 25.183566 25.183566L914.82909 862.925465c13.890358 0 25.178449-11.275811 25.178449-25.183566C940.008562 823.836191 928.719448 812.567543 914.82909 812.567543zM184.637696 485.235426 109.098255 485.235426c-13.890358 0-25.178449 11.274788-25.178449 25.182542 0 13.904685 11.288091 25.178449 25.178449 25.178449l75.538417 0c13.891382 0 25.179472-11.274788 25.179472-25.178449C209.817168 496.510214 198.529077 485.235426 184.637696 485.235426zM914.82909 485.235426 360.890932 485.235426c-13.895475 0-25.183566 11.274788-25.183566 25.182542 0 13.904685 11.289114 25.178449 25.183566 25.178449L914.82909 535.596418c13.890358 0 25.178449-11.274788 25.178449-25.178449C940.008562 496.510214 928.719448 485.235426 914.82909 485.235426zM184.637696 157.909449 109.098255 157.909449c-13.890358 0-25.178449 11.276834-25.178449 25.181519 0 13.902638 11.288091 25.177426 25.178449 25.177426l75.538417 0c13.891382 0 25.179472-11.273764 25.179472-25.177426C209.817168 169.18526 198.529077 157.909449 184.637696 157.909449zM360.890932 208.267371 914.82909 208.267371c13.890358 0 25.178449-11.273764 25.178449-25.177426 0-13.904685-11.288091-25.181519-25.178449-25.181519L360.890932 157.908426c-13.895475 0-25.183566 11.276834-25.183566 25.181519C335.707366 196.993606 346.99648 208.267371 360.890932 208.267371z"
          fill="#000000"
          p-id="5587"
        ></path>
      </svg>
      <h2 class="mb-3 font-bold text-gray-900 uppercase dark:text-gray-800">分类</h2>
    </div>
    <!-- 分类列表 -->
    <div
      class="text-sm font-medium text-gray-600 bg-white rounded-lg dark:bg-gray-200 dark:border-gray-200 dark:text-gray-800"
    >
      <a
        @click="goCategoryArticleListPage(category.id, category.name)"
        v-for="(category, index) in categories"
        :key="index"
        class="flex items-center w-full px-4 py-2 rounded-lg border-gray-200 cursor-pointer hover:bg-gray-100 hover:text-blue-700 dark:border-gray-600 dark:hover:bg-gray-600 dark:hover:text-white dark:focus:ring-gray-200 dark:focus:text-white"
      >
        <svg
          class="w-3.5 h-3.5 mr-1.5 dark:text-white"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="#93c5fd"
          viewBox="0 0 21 18"
        >
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M2.539 17h12.476l4-9H5m-2.461 9a1 1 0 0 1-.914-1.406L5 8m-2.461 9H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.443a1 1 0 0 1 .8.4l2.7 3.6H16a1 1 0 0 1 1 1v2H5"
          />
        </svg>
        {{ category.name }}
      </a>
    </div>
  </div>
</template>

<script setup>
  import { getCategoryList } from "@/api/frontend/category";
  import { ref } from "vue";
  import { useRouter } from "vue-router";

  // 引入路由
  const router = useRouter();
  // 跳转分类文章列表页
  const goCategoryArticleListPage = (id, name) => {
    // 跳转时通过 query 携带参数（分类 ID、分类名称）
    router.push({ path: "/category/article/list", query: { id, name } });
  };

  // 所有分类
  const categories = ref([]);
  getCategoryList().then(res => {
    if (res.success) {
      categories.value = res.data;
    }
  });
</script>
